<template>
  <div>
    <p>
      时间<i style="width: 14px; display: inline-block"></i>
      <el-input
        type="text"
        v-model="date"
        placeholder="请输入   例：2022 / 202201"
        style="width: 16%; margin-right: 30px"
        @keyup.enter.native="search()"
      ></el-input>
      评估师<i style="width: 14px; display: inline-block"></i>
      <el-input
        type="text"
        v-model="ppgs"
        placeholder="请输入"
        style="width: 16%"
        @keyup.enter.native="search()"
      ></el-input>
      <el-button type="primary" @click="search()" class="margin-l-25"
        >查询</el-button
      >
    </p>
    <div>
      <el-row :gutter="24" class="stat-item">
        <el-col :span="6" v-for="(item, index) in stat" :key="index">
          <div class="stat-item__item">
            <div
              class="stat-item__icon"
              :style="{ 'background-color': item.bgColor }"
            >
              <p>{{ item.title }}</p>
            </div>
            <div class="stat-item__detail">
              <div class="stat-item__total">{{ item.total }}</div>
              <div class="stat-item__title">
                <p class="stat-item__p">{{ item.sumtime }}</p>
                <p class="stat-item__p">{{ item.pjtime }}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <cheart ref="eChart" :ptime="ptime"></cheart>

    <!-- <el-row :gutter="24">
            <el-col :span="8">
                <div class="box">
                    <div>新增业务</div>
                    <h2 class="num">150</h2>
                    <div>总用时：xxx小时</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box">
                    <div>评估业务</div>
                    <h2 class="num">150</h2>
                    <div>总用时：xxx小时</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box">
                    <div>审核业务</div>
                    <h2 class="num">150</h2>
                    <div>总用时：xxx小时</div>
                </div>
            </el-col>

        </el-row> -->

    <!-- <el-row :gutter="24">
            <el-col :span="12">
                <div id="firstPie" class="chart"></div>
            </el-col>
            <el-col :span="12">
                <div id="secondPie" class="chart"></div>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="12">
                <div id="bar" class="chart"></div>
            </el-col>
            <el-col :span="12">
                <div id="line" class="chart"></div>
            </el-col>
        </el-row> -->
  </div>
</template>

<script>
// import Util from '@/assets/js/util';
import cheart from "../cheart.vue";
import { workNum } from "@/api/workChart/workChart";
export default {
  components: { cheart },
  data() {
    return {
      role: localStorage.getItem("role"),
      date: "",
      ptime: "",
      ppgs: "",
      // 顶部三个类型的数据
      stat: [
        {
          title: "新增业务",
          sumtime: "总用时：",
          pjtime: "平均用时：",
          total: 0,
          bgColor: "#ebcc6f",
        },
        {
          title: "评估业务",
          sumtime: "总用时：",
          pjtime: "平均用时：",
          total: 0,
          bgColor: "#3acaa9",
        },
        {
          title: "审核业务",
          sumtime: "总用时：",
          pjtime: "平均用时：",
          total: 0,
          bgColor: "#67c4ed",
        },
      ],
    };
  },
  // computed: {
  //     chartFirstPie () {
  //         return this.$echarts.init(Util.getDom("firstPie"));
  //     },
  //     chartSecondPie () {
  //         return this.$echarts.init(Util.getDom("secondPie"));
  //     },
  //     chartBar () {
  //         return this.$echarts.init(Util.getDom("bar"));
  //     },
  //     chartLine () {
  //         return this.$echarts.init(Util.getDom("line"));
  //     }

  // },
  methods: {
    search() {
      this.ptime = this.date;
      this.getNum();
    },
    getNum() {
      //console.log("角色  " + localStorage.getItem("role"));
      let obj = {
        ptime: this.ptime,
        ppgs: "",
        pqyid: Number(localStorage.getItem("companyId")),
      };
      if (this.ppgs) {
        obj.ppgs = this.ppgs;
      } else if (this.role == "企业管理员") {
        obj.ppgs = "null";
      } else {
        obj.ppgs = localStorage.getItem("username");
      }

      workNum(obj).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.stat[i].title = res.data[i].title;
          this.stat[i].sumtime = "总用时：" + res.data[i].sumtime;
          this.stat[i].pjtime = "平均用时：" + res.data[i].pjtime;
          this.stat[i].total = res.data[i].total;
          if (i == 0) {
            this.stat[i].bgColor = "#ebcc6f";
          } else if (i == 1) {
            this.stat[i].bgColor = "#3acaa9";
          } else {
            this.stat[i].bgColor = "#67c4ed";
          }
        }
      });
    },
    // getFirstPie () {
    //     this.chartFirstPie.setOption({
    //         title: {
    //             text: '案件类型、委托人类型占比',
    //             // subtext: 'Fake Data',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'item'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'left'
    //         },
    //         series: [
    //             {
    //                 name: '数量',
    //                 type: 'pie',
    //                 center: ["50%", "50%"],
    //                 radius: '50%',
    //                 data: [
    //                     { value: 1048, name: '司法' },
    //                     { value: 735, name: '企业' },
    //                     { value: 580, name: '个人' }
    //                 ],
    //                 emphasis: {
    //                     itemStyle: {
    //                         // shadowBlur: 400,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     });
    // },

    // getSecondPie () {
    //     this.chartSecondPie.setOption({
    //         title: {
    //             text: '案件类型、委托人类型占比',
    //             // subtext: 'Fake Data',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'item'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'right'
    //         },
    //         series: [
    //             {
    //                 name: '数量',
    //                 type: 'pie',
    //                 center: ["50%", "50%"],
    //                 radius: '50%',
    //                 data: [
    //                     { value: 23, name: '司法' },
    //                     { value: 14, name: '企业' },
    //                     { value: 36, name: '个人' },
    //                 ],
    //                 emphasis: {
    //                     itemStyle: {
    //                         // shadowBlur: 400,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     });
    // },

    // getBar () {
    //     this.chartBar.setOption({
    //         title: {
    //             text: '对接人案件完成情况',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'shadow'
    //             }
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'left'
    //         },
    //         grid: {
    //             left: '3%',
    //             bottom: '3%',
    //             containLabel: true
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 data: ['张三', '李四', '王五', '赵四', '翠花']
    //             }
    //         ],
    //         yAxis: [
    //             {
    //                 type: 'value'
    //             }
    //         ],
    //         series: [
    //             {
    //                 name: '个人',
    //                 type: 'bar',
    //                 stack: 'state',
    //                 emphasis: {
    //                     focus: 'series'
    //                 },
    //                 data: [1, 2, 3, 4, 5]
    //             },
    //             {
    //                 name: '企业',
    //                 type: 'bar',
    //                 stack: 'state',
    //                 emphasis: {
    //                     focus: 'series'
    //                 },
    //                 data: [6, 7, 8, 9, 0]
    //             },
    //             {
    //                 name: '司法',
    //                 type: 'bar',
    //                 stack: 'state',
    //                 emphasis: {
    //                     focus: 'series'
    //                 },
    //                 data: [5, 4, 3, 2, 1]
    //             },
    //         ]
    //     });
    // },

    // getLine () {
    //     this.chartLine.setOption({
    //         color: ['#00F', '#F00'],
    //         title: {
    //             text: '评估师达成率',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'cross',
    //                 label: {
    //                     backgroundColor: '#6a7985'
    //                 }
    //             }
    //         },
    //         legend: {
    //             data: ['评估师', '高级评估师'],
    //             orient: 'vertical',
    //             left: 'right'
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '4%',
    //             bottom: '3%',
    //             containLabel: true
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 boundaryGap: false,
    //                 data: ['张三', '李四', '王五', '赵四', '翠花']
    //             }
    //         ],
    //         yAxis: [
    //             {
    //                 type: 'value'
    //             }
    //         ],
    //         series: [
    //             {
    //                 name: '评估师',
    //                 type: 'line',
    //                 smooth: true,
    //                 lineStyle: {
    //                     width: 3
    //                 },
    //                 showSymbol: false,
    //                 areaStyle: {
    //                     opacity: 0.3,
    //                     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: 'rgb(0, 0, 255)'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: 'rgb(1, 191, 236)'
    //                         }
    //                     ])
    //                 },
    //                 emphasis: {
    //                     focus: 'series'
    //                 },
    //                 data: [1.4, 2.3, 1, 2.6, 0.9]
    //             },
    //             {
    //                 name: '高级评估师',
    //                 type: 'line',
    //                 smooth: true,
    //                 lineStyle: {
    //                     width: 3
    //                 },
    //                 showSymbol: false,
    //                 areaStyle: {
    //                     opacity: 0.3,
    //                     color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //                         {
    //                             offset: 0,
    //                             color: 'rgb(255, 0, 0)'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: 'rgb(77, 119, 255)'
    //                         }
    //                     ])
    //                 },
    //                 emphasis: {
    //                     focus: 'series'
    //                 },
    //                 data: [1.2, 2.8, 1.1, 2.3, 2.2]
    //             },
    //         ]
    //     });
    // },
  },

  mounted() {
    // this.getFirstPie();
    // this.getSecondPie();
    // this.getBar();
    // this.getLine();
    this.getNum();
  },
};
</script>

<style scoped lang="less">
.chart {
  width: 96%;
  height: 600px;
  border-radius: 10px;
  // background-color: #f5f5f5;
  box-shadow: 0 0 5px transparent;
  padding: 15px 0 0 15px;

  &:hover {
    box-shadow: 0 0 5px #2eb3ff;
  }

  margin: 50px auto;
}

.stat-item {
  margin-top: 22px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
}

.el-row + .el-row {
  margin-top: 10px;
}

.stat-item__item {
  display: flex;
  height: 120px;
  box-shadow: 2px 2px 5px #ccc;
  background-color: #f5f5f5;
}

.stat-item__icon {
  display: flex;
  // justify-content: center;
  align-items: center;
  width: 2rem;
  color: white;
  font-size: 18px;
  text-align: center;
}

.stat-item__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-item__total {
  color: #0085d0;
  font-size: 27px;
  font-weight: bold;
}

.stat-item__title {
  width: 100%;
  color: #666;
}

.stat-item__p {
  margin: 5px 15px;
  font-size: 14px;
  font-weight: bold;
}
</style>